<template>
  <q-dialog v-model="show">
    <q-card class="card-body">
      <q-card-section>
        <div class="text-h6">添加用户</div>
      </q-card-section>

      <q-separator />

      <q-card-section class="q-pt-none">
        <q-input
          dense
          v-model="username"
          label="用户名"
          autofocus
          @keyup.enter="show = false"
          placeholder="请输入用户名"
        />
        <div class="centerDiv"></div>
        <q-input
          dense
          v-model="password"
          label="密码"
          autofocus
          @keyup.enter="show = false"
          :type="isPwd ? 'password' : 'text'"
          placeholder="请输入密码"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="取消" color="primary" v-close-popup />
        <q-btn label="确认" color="primary" v-close-popup @click="createUser" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { create } from '../../api/user/user';
import { Notify } from 'quasar';

const show = ref(true);
const username = ref('');
const password = ref('');
const emit = defineEmits(['createUserSuccess']);
const isPwd = ref(true);

const createUser = () => {
  create({ username: username.value, password: password.value }).then(() => {
    show.value = false;
    emit('createUserSuccess');
    Notify.create({
      type: 'positive',
      message: '用户创建成功',
      position: 'top'
    });
    window.location.reload();
  });
};
</script>
<style scoped>
.card-body {
  min-width: 500px;
  padding: 20px 10px;
}
.centerDiv {
  height: 30px;
}
</style>
